<!-- /*
* Bootstrap 5
* Template Name: Furni
* Template Author: Untree.co
* Template URI: https://untree.co/
* License: https://creativecommons.org/licenses/by/3.0/
*/ -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="author" content="Untree.co">
  <link rel="shortcut icon" href="favicon.png">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="./lib/js/online.js"></script>
  <meta name="description" content="" />
  <meta name="keywords" content="bootstrap, bootstrap4" />

		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
		<link href="css/tiny-slider.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<title>XRY的网上书城</title>
	</head>

	<body>

		<!-- Start Header/Navigation -->
		<nav class="custom-navbar navbar navbar navbar-expand-md navbar-dark bg-dark" arial-label="Furni navigation bar">

			<div class="container">
				<a class="navbar-brand" href="index.html">bookstore<span>.</span></a>

				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsFurni" aria-controls="navbarsFurni" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarsFurni">
					<ul class="custom-navbar-nav navbar-nav ms-auto mb-2 mb-md-0">
						<li class="nav-item active">
							<a class="nav-link" href="index.html">首页</a>
						</li>
						<li><a class="nav-link" href="shop.html">商城</a></li>
						<li><a class="nav-link" href="cart.html">购物车</a></li>
						<li><a class="nav-link" href="admin.html">管理员登录</a></li>

<!--						<li><a class="nav-link" href="blog.html">Blog</a></li>-->
<!--						<li><a class="nav-link" href="contact.html">Contact us</a></li>-->
					</ul>

					<ul class="custom-navbar-cta navbar-nav mb-2 mb-md-0 ms-5">
						<li><a class="nav-link" href="admin.html"><img src="images/user.svg"></a></li>
						<li><a class="nav-link" href="cart.html"><img src="images/cart.svg"></a></li>
					</ul>
				</div>
			</div>
				
		</nav>
		<!-- End Header/Navigation -->

		<!-- Start Hero Section -->
			<div class="hero">
				<div class="container">
					<div class="row justify-content-between">
						<div class="col-lg-5">
							<div class="intro-excerpt">
								<h1>在线的<span clsas="d-block">网上书店</span></h1>
								<h4 style="color:white" class="mb-4">当前在线<span id="online"></span>人</h4>
								<p><a href="./shop.html" class="btn btn-secondary me-2">去购物</a><a href="./cart.html" class="btn btn-white-outline">购物车</a></p>
							</div>
						</div>
						<div class="col-lg-7">
							<div class="hero-img-wrap">
								<img src="images/book-home-1.png" class="img-fluid">
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- End Hero Section -->

		<!-- Start Product Section -->
		<div class="product-section">
			<div class="container">
				<div class="row">

					<!-- Start Column 1 -->
					<div class="col-md-12 col-lg-3 mb-5 mb-lg-0">
						<h2 class="mb-4 section-title">精选好书</h2>
						<p class="mb-4">新书、热销书 </p>
						<p><a href="shop.html" class="btn">更多</a></p>
					</div> 
					<!-- End Column 1 -->

					<!-- Start Column 2 -->
					<div class="col-12 col-md-4 col-lg-3 mb-5 mb-md-0">
						<a class="product-item" href="shop.html">
							<img src="./images/upload/6534a0d7-e944-40eb-8f75-1c8fe9981c6f.png" class="img-fluid product-thumbnail">
							<h3 class="product-title">我与地坛</h3>
							<strong class="product-price">￥17.5</strong>

						</a>
					</div> 
					<!-- End Column 2 -->

					<!-- Start Column 3 -->
					<div class="col-12 col-md-4 col-lg-3 mb-5 mb-md-0">
						<a class="product-item" href="shop.html">
							<img src="images/upload/a09de95c-2914-45c9-8261-700deb289332.png" class="img-fluid product-thumbnail">
							<h3 class="product-title">窄门</h3>
							<strong class="product-price">￥45.0</strong>

						</a>
					</div>
					<!-- End Column 3 -->

					<!-- Start Column 4 -->
					<div class="col-12 col-md-4 col-lg-3 mb-5 mb-md-0">
						<a class="product-item" href="shop.html">
							<img src="images/upload/502e0c10-080d-473b-b776-8c0b08121bb4.png" class="img-fluid product-thumbnail">
							<h3 class="product-title">百年孤独</h3>
							<strong class="product-price">￥39.6</strong>

						</a>
					</div>
					<!-- End Column 4 -->

				</div>
			</div>
		</div>
		<!-- End Product Section -->

		<!-- Start Why Choose Us Section -->

		<!-- End Why Choose Us Section -->

		<!-- Start We Help Section -->

		<!-- End We Help Section -->

		<!-- Start Popular Product -->
		<div class="popular-product">
			<div class="container">
				<div class="row">

					<div class="col-12 col-md-6 col-lg-4 mb-4 mb-lg-0">
						<div class="product-item-sm d-flex">
							<div class="thumbnail">
								<img src="images/upload/6e4b1007-ef9a-4e43-9305-ec0859c5198b.png" alt="Image" class="img-fluid">
							</div>
							<div class="pt-3">
								<h3>听风八百遍，才知是人间</h3>
								<p>我们生而破碎，用活着来修修补补</p>
							</div>
						</div>
					</div>

					<div class="col-12 col-md-6 col-lg-4 mb-4 mb-lg-0">
						<div class="product-item-sm d-flex">
							<div class="thumbnail">
								<img src="images/upload/f1051d43-e1c3-481e-ad63-d405fc06b599.png" alt="Image" class="img-fluid">
							</div>
							<div class="pt-3">
								<h3>活着</h3>
								<p>活着的意义在于活着</p>
							</div>
						</div>
					</div>

					<div class="col-12 col-md-6 col-lg-4 mb-4 mb-lg-0">
						<div class="product-item-sm d-flex">
							<div class="thumbnail">
								<img src="images/upload/3fd4dde2-8c14-4c3a-a221-df75868a68d5.png" alt="Image" class="img-fluid">
							</div>
							<div class="pt-3">
								<h3>在细雨中呼喊</h3>
								<p>安顿自己，是成年人最好的活法</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- End Popular Product -->

		<!-- Start Testimonial Slider -->
		<div class="testimonial-section">
			<div class="container">
				<div class="row">
					<div class="col-lg-7 mx-auto text-center">
						<h2 class="section-title">为何读书？</h2>
					</div>
				</div>

				<div class="row justify-content-center">
					<div class="col-lg-12">
						<div class="testimonial-slider-wrap text-center">

							<div id="testimonial-nav">
								<span class="prev" data-controls="prev"><span class="fa fa-chevron-left"></span></span>
								<span class="next" data-controls="next"><span class="fa fa-chevron-right"></span></span>
							</div>

							<div class="testimonial-slider">
								
								<div class="item">
									<div class="row justify-content-center">
										<div class="col-lg-8 mx-auto">

											<div class="testimonial-block text-center">
												<blockquote class="mb-5">
													<p>&ldquo;世界上任何书籍都不能带给你好运，但是它们能让你悄悄成为你自己。&rdquo;</p>
												</blockquote>

												<div class="author-info">
													<div class="author-pic">
														<img src="images/hem.jpg" alt="Maria Jones" class="img-fluid">
													</div>
													<h3 class="font-weight-bold">赫尔曼·黑塞</h3>
													<span class="position d-block mb-3">德国作家，诗人</span>
												</div>
											</div>

										</div>
									</div>
								</div> 
								<!-- END item -->

								<div class="item">
									<div class="row justify-content-center">
										<div class="col-lg-8 mx-auto">

											<div class="testimonial-block text-center">
												<blockquote class="mb-5">
													<p>&ldquo;读书多了，容颜自然改变，许多时候，自己可能以为许多看过的书籍都成过眼烟云，不复记忆，其实它们仍是潜在气质里、在谈吐上、在胸襟的无涯，当然也可能显露在生活和文字中。&rdquo;</p>
												</blockquote>

												<div class="author-info">
													<div class="author-pic">
														<img src="images/sanmao.jpg" alt="Maria Jones" class="img-fluid">
													</div>
													<h3 class="font-weight-bold">三毛</h3>
													<span class="position d-block mb-3">中国台湾当代女作家、旅行家</span>
												</div>
											</div>

										</div>
									</div>
								</div> 
								<!-- END item -->

								<div class="item">
									<div class="row justify-content-center">
										<div class="col-lg-8 mx-auto">

											<div class="testimonial-block text-center">
												<blockquote class="mb-5">
													<p>&ldquo;读书原为自己受用，多读不能算是荣誉，少读也不能算是羞耻。少读如果彻底，必能养成深思熟虑的习惯，涵泳优游，以至于变化气质；多读而不求甚解，则如驰骋十里洋场，虽珍奇满目，徒惹得心花意乱，空手而归。世间许多人读书只为装点门面，如暴发户炫耀家私，以多为贵。&rdquo;</p>
												</blockquote>

												<div class="author-info">
													<div class="author-pic">
														<img src="images/zgq.jpg" alt="Maria Jones" class="img-fluid">
													</div>
													<h3 class="font-weight-bold">朱光潜</h3>
													<span class="position d-block mb-3">现当代著名美学家、文艺理论家、教育家、翻译家</span>
												</div>
											</div>

										</div>
									</div>
								</div> 
								<!-- END item -->

							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End Testimonial Slider -->

		<!-- Start Blog Section -->

		<!-- End Blog Section -->	

		<!-- Start Footer Section -->
		<footer class="footer-section">
			<div class="container relative">

				<div class="sofa-img">
					<img src="images/book-home.png" alt="Image" class="img-fluid">
				</div>

				<div class="row">
					<div class="col-lg-8">
						<div class="subscription-form">
							<h3 class="d-flex align-items-center"><span class="me-1"><img src="images/envelope-outline.svg" alt="Image" class="img-fluid"></span><span>想对我们说...</span></h3>

							<form action="#" class="row g-3">
								<div class="col-auto">
									<input type="text" class="form-control" placeholder="您的姓名">
								</div>
								<div class="col-auto">
									<input type="email" class="form-control" placeholder="您的邮箱">
								</div>
								<div class="col-auto">
									<button class="btn btn-primary">
										<span class="fa fa-paper-plane"></span>
									</button>
								</div>
							</form>

						</div>
					</div>
				</div>

				<div class="row g-5 mb-5">
					<div class="col-lg-4">
						<div class="mb-4 footer-logo-wrap"><a href="#" class="footer-logo">XRY的<span>网上书城</span></a></div>
						<p class="mb-4">联系我们</p>

						<ul class="list-unstyled custom-social">
							<li><a href="#"><span class="fa fa-brands fa-facebook-f"></span></a></li>
							<li><a href="#"><span class="fa fa-brands fa-twitter"></span></a></li>
							<li><a href="#"><span class="fa fa-brands fa-instagram"></span></a></li>
							<li><a href="#"><span class="fa fa-brands fa-linkedin"></span></a></li>
						</ul>
					</div>

<!--					<div class="col-lg-8">-->
<!--						<div class="row links-wrap">-->
<!--							<div class="col-6 col-sm-6 col-md-3">-->
<!--								<ul class="list-unstyled">-->
<!--									<li><a href="#">About us</a></li>-->
<!--									<li><a href="#">Services</a></li>-->
<!--									<li><a href="#">Blog</a></li>-->
<!--									<li><a href="#">Contact us</a></li>-->
<!--								</ul>-->
<!--							</div>-->

<!--							<div class="col-6 col-sm-6 col-md-3">-->
<!--								<ul class="list-unstyled">-->
<!--									<li><a href="#">Support</a></li>-->
<!--									<li><a href="#">Knowledge base</a></li>-->
<!--									<li><a href="#">Live chat</a></li>-->
<!--								</ul>-->
<!--							</div>-->

<!--							<div class="col-6 col-sm-6 col-md-3">-->
<!--								<ul class="list-unstyled">-->
<!--									<li><a href="#">Jobs</a></li>-->
<!--									<li><a href="#">Our team</a></li>-->
<!--									<li><a href="#">Leadership</a></li>-->
<!--									<li><a href="#">Privacy Policy</a></li>-->
<!--								</ul>-->
<!--							</div>-->

<!--							<div class="col-6 col-sm-6 col-md-3">-->
<!--								<ul class="list-unstyled">-->
<!--									<li><a href="#">Nordic Chair</a></li>-->
<!--									<li><a href="#">Kruzo Aero</a></li>-->
<!--									<li><a href="#">Ergonomic Chair</a></li>-->
<!--								</ul>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->

				</div>



				<div class="border-top copyright">
					<div class="row pt-4">
						<div class="col-lg-6">
							<p class="mb-2 text-center text-lg-start">Copyright &copy;<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. &mdash; Designed with love by <a href="https://untree.co">Untree.co</a> Distributed By <a hreff="https://themewagon.com">ThemeWagon</a>  <!-- License information: https://untree.co/license/ -->
            </p>
						</div>

						<div class="col-lg-6 text-center text-lg-end">
							<ul class="list-unstyled d-inline-flex ms-auto">
								<li class="me-4"><a href="#">Terms &amp; Conditions</a></li>
								<li><a href="#">Privacy Policy</a></li>
							</ul>
						</div>

					</div>
				</div>

			</div>
		</footer>
		<!-- End Footer Section -->	


		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/tiny-slider.js"></script>
		<script src="js/custom.js"></script>
	</body>

</html>
